<template>
<!--  <div class="comments-box" v-if="showSelf">-->
  <div class="comments-box">
    <div class="header">
      <h2>评论</h2>
      <div class="comment-count">{{ commentCount !== 0 ? commentCount:'' }}</div>
      <div class="order">
        <div class="hotest">最热</div>
        <el-divider direction="vertical"></el-divider>
        <div class="latest">最新</div>
      </div>
    </div>
    <div class="my-comment">
      <div class="above">
        <div class="avatar">
          <el-avatar :src="currentUserAvatar" :size="50"></el-avatar>
        </div>
        <div class="input">
          <el-input
              v-model="commentFormNoTarget.content"
              :style="`width: ${60+inputWidth}px`"
              :autosize="{ minRows: 2, maxRows: 4 }"
              type="textarea"
              placeholder="天青色等烟雨，评论区在等你"
              @focus="isInput = true"
              @blur="handleBlur"
          />
          <!--              @blur="isInput = false"-->
        </div>
      </div>
      <div class="send"  v-if="isInput">
        <div class="icon">
          <div class="img">
            <el-icon>
              <Picture/>
            </el-icon>
          </div>
          <div class="at">
            @
          </div>
        </div>
        <div class="publish">
          <el-button @click="submitComment(false)">发布</el-button>
        </div>
      </div>
    </div>
    <div class="comment-list">
      <div class="list-item" v-for="item in commentList">
        <div class="list-item-box">
          <div class="comment-item-left">
            <div class="avatar">
              <el-avatar :src="item.publisherAvatar" :size="50"></el-avatar>
            </div>
          </div>
          <div class="comment-item-right">
            <div class="nick-name">
              {{ item.publisherNickname }}
            </div>
            <div class="content">
              {{ item.content }}
            </div>
            <div class="footer">
              <div class="datetime">
                {{ item.createTime }}
              </div>
              <div class="like">
                <img src="/icon/no-like-icon.webp" v-if="!item.userLikeStatus" @click="doLike(item.commentId,item)" alt="" width="20">
                <img src="/icon/has-like-icon.webp" v-else @click="doLike(item.commentId,item)" alt="" width="20">
                {{ item.likeCount === 0 ? '' : item.likeCount }}
              </div>
              <div class="unlike">
                <el-icon>
                  <Hide/>
                </el-icon>
              </div>
              <div class="reply" @click="inputComment(item.commentId,item.publisherId,item.publisherNickname)">
                回复
              </div>
            </div>
            <!--二级评论-->
            <div class="extra-chat" v-for="subItem in item.subComments">
              <div class="extra-chat-left">
                <el-avatar :src="subItem.publisherAvatar"></el-avatar>
              </div>
              <div class="extra-chat-right">
                <div class="top">
                      <span class="replier-nickname">
                      {{ subItem.publisherNickname }}
                        &nbsp;
                      </span>
                  <span class="txt">回复</span>
                  <span class="listener">
                        @{{ subItem.replyTargetNickname }}&nbsp;&nbsp;:
                      </span>
                  <span class="reply-content">
                        {{ subItem.content }}
                      </span>
                </div>
                <div class="footer">
                  <div class="datetime">
                    {{ subItem.createTime }}
                  </div>
                  <div class="like">
                    <el-icon>
                      <Pointer/>
                    </el-icon>
                    {{ subItem.likeCount === 0 ? '' : subItem.likeCount }}
                  </div>
                  <div class="unlike">
                    <el-icon>
                      <Hide/>
                    </el-icon>
                  </div>
                  <div class="reply" @click="inputComment(item.commentId,subItem.publisherId,subItem.publisherNickname)">
                    回复
                  </div>
                </div>
              </div>
            </div>
            <!--                <div class="my-comment" v-if="showInput">-->
            <div class="my-comment" v-if="showInputId === item.commentId && showInput">
              <div class="above">
                <div class="avatar">
                  <el-avatar :src="currentUserAvatar" :size="50"></el-avatar>
                </div>
                <div class="input">
                  <el-input
                      v-model="commentForm.content"
                      :style="`width: ${inputWidth}px`"
                      :autosize="{ minRows: 2, maxRows: 4 }"
                      type="textarea"
                      :placeholder="'回复 @'+replyTargetName+': '"

                  />
                  <!--                      @focus="isInput = true"-->
                  <!--                      @blur="isInput = false"-->
                </div>
              </div>
              <div class="send">
                <div class="icon">
                  <div class="img">
                    <el-icon>
                      <Picture/>
                    </el-icon>
                  </div>
                  <div class="at">
                    @
                  </div>
                </div>
                <div class="publish" style=" padding-right: 70px;">
                  <el-button @click="submitComment(true)">发布</el-button>
                </div>
              </div>
            </div>

          </div>
        </div>
        <el-divider></el-divider>
      </div>

    </div>
  </div>
</template>
<script setup>
import {onMounted, ref} from "vue";


const currentUserAvatar = ref()

const isInput = ref(false)

const showSelf = ref(false)

onMounted(async ()=>{
  currentUserAvatar.value = userInformation.userAvatar
  console.log(props.dynamicId,useUserStore().userInfo.userId)
  const userId = localStorage.getItem('userId')
  const res = await getCommentListByDynamicId(props.dynamicId,userId)
  console.log(res)
  // emitter.on("showSelf",(value)=>{
  //   showSelf.value = value
  // })

  // emitter.emit("commentCount",res.data.length)
  commentList.value = res.data
})

// 上面的输入框的事件
const handleBlur = () => {
  setTimeout(() => {
    console.log("失去焦点事件触发...")
    isInput.value = false
  }, 100)
}

const userInformation = useUserStore().userInfo
// const props = defineProps(["dynamicId"])
const props = defineProps({
  dynamicId:{
    type:Number,
    default:0,
  },

  inputWidth:{
    type:Number,
    default: 620
  }
})


console.log(props)
console.log(props.dynamicId)
const commentFormNoTarget = ref({
  replyTargetId: 0,
  parentCommentId: 0,
  sourceContentId: props.dynamicId,
  content: '',
  publisherNickname:userInformation.nickname,
  publisherAvatar:userInformation.userAvatar,
  replyTargetNickname:'',
})
const commentForm = ref({
  replyTargetId: 0,
  parentCommentId: 0,
  sourceContentId: props.dynamicId,
  content: '',
  publisherNickname:'',
  publisherAvatar:'',
  replyTargetNickname:'',
})
// 控制输入框的显示
const showInput = ref(false)
const showInputId = ref()
const replyTargetName = ref('')
const inputComment = (parentId,publisherId,publisherNickname) => {

  // 判断登录状态
  if(!checkLoginStatus()){
    emitter.emit("showLogin")
    return;
  }

  showInput.value = !showInput.value
  showInputId.value = parentId
  replyTargetName.value = publisherNickname
  if(showInput.value){
    commentForm.value.parentCommentId = parentId
    commentForm.value.replyTargetId = publisherId
    commentForm.value.replyTargetNickname = publisherNickname
  }
}
const contentCheck = (e) => {
  if(e.target.value.length > 100){
    ElMessage({
      message: '评论字数不能超过100字',
      type: 'warning'
    })
    return false
  }else {
    return true
  }
}
import {checkLoginStatus, validateCommentContent} from "@/utils/validate.js";
import emitter from "@/utils/emitter.js";
import {useUserStore} from "@/stores/userInfoStore.js";
import {getCommentListByDynamicId, likeComment, publishDynamicComment} from "@/api/api.js";
import {ElMessage} from "element-plus";
const submitComment = async (subComment) => {
  console.log("开始执行提交评论")
  console.log(userInformation)

  // console.log(u)
  console.log(commentForm.value)
  console.log(commentFormNoTarget.value)
  const uI = useUserStore().userInfo
  commentForm.value.publisherNickname = uI.nickname
  commentForm.value.publisherAvatar = uI.userAvatar
  commentFormNoTarget.value.publisherNickname = uI.nickname
  commentFormNoTarget.value.publisherAvatar = uI.userAvatar

  if(subComment === true){
    if(!validateCommentContent(commentForm.value.content)){
      return
    }
    // inputComment()
    const res = await publishDynamicComment(commentForm.value)
    console.log(res)
  }else {
    if(!validateCommentContent(commentFormNoTarget.value.content)){
      return
    }
    const res = await publishDynamicComment(commentFormNoTarget.value)
    console.log(res)
  }
  commentForm.value.content = ''
  commentFormNoTarget.value.content = ''
  getCommentListByDynamicId(props.dynamicId,useUserStore().userInfo.userId)
      .then(res => {
        console.log(res.data)
        commentList.value = res.data
      })
  console.log(commentForm)
  console.log(commentFormNoTarget)


}

const commentList = ref([])





/* 评论点赞相关*/
const likeForm = {
  supporterId: 0,
  likeContentId:0,
  contentOwnerId:0
}
// 点赞
const doLike = async (id,item) => {
  const userId = useUserStore().userInfo.userId
  console.log(item.publisherId === userId)
  if(item.publisherId === userId){ // 自己不能给自己点赞
    return;
  }
  likeForm.supporterId = userId
  likeForm.likeContentId = id
  likeForm.contentOwnerId = item.publisherId
  const res = await likeComment(likeForm)
  if(res.code === 200){
    if(res.msg.includes("取消")){
      ElMessage.success(res.msg);
      item.userLikeStatus = 0;
      item.likeCount --
      return;
    }
    item.userLikeStatus = 1;
    item.likeCount ++
    ElMessage.success("点赞成功！")
  }

}

</script>
<style lang="scss" scoped>
.comments-box {
  .header {
    display: flex;
    height: 50px;
    line-height: 50px;

    .comment-count {
      margin-left: 10px;
      width: 60px;
      color: gray;

      font-size: 13px;
    }

    .order {
      color: gray;
      width: 100px;
      display: flex;
      font-size: 13px;

      .el-divider--vertical {
        top: 20px;
      }

      .hotest, .latest {
        width: 40px;
        padding: 0 5px;
        cursor: pointer;
      }
    }
  }

  .my-comment {
    min-height: 60px;
    //background-color: #ff9c9c;
    display: flex;
    flex-direction: column;

    .above {
      display: flex;
      align-items: center;
      margin-bottom: 10px;
      box-sizing: border-box;
      padding-left: 15px;

      .avatar {
        width: 60px;
        margin-right: 15px;
      }
    }

    .send {
      box-sizing: border-box;
      padding-left: 60px;
      height: 50px;
      display: flex;
      justify-content: space-between;

      .icon {
        width: 50px;
        display: flex;
        justify-content: space-around;

        .img, .at {
          cursor: pointer;
        }
      }

      .publish {
        width: 60px;
        box-sizing: border-box;
      }
    }
  }

  .comment-list {

    .list-item {
      //display: flex;
      min-height: 100px;
      padding: 5px 0;

      .list-item-box {
        display: flex;

        .comment-item-left {
          box-sizing: border-box;
          width: 80px;

          .avatar {
            padding: 0 15px;
          }
        }

        .comment-item-right {
          .nick-name {
            height: 30px;
            font-size: 13px;
            width: 300px;
            color: gray;
          }

          .content {
            min-height: 30px;
            font-size: 14px;
            //width: 720px;
          }

          .footer {
            height: 30px;
            line-height: 30px;
            display: flex;
            color: gray;
            font-size: 13px;

            .datetime {
              width: 150px;
            }

            .like, .unlike, .reply {
              width: 50px;
              line-height: 30px;
            }

          }

          .extra-chat {
            display: flex;
            min-height: 30px;

            .extra-chat-left {
              width: 50px;
              box-sizing: border-box;
              padding: 5px;
            }

            .extra-chat-right {
              box-sizing: border-box;
              width: 670px;
              //background-color: #ff9c9c;
              padding: 10px 5px;

              .top {
                .replier-nickname {
                  color: gray;
                  font-size: 13px;
                }

                .reply-content {
                  font-size: 14px;
                }
              }

              //.extra-footer{
              //
              //}
            }
          }
        }

      }
    }
  }
}
</style>